<template>
  <div>
    <div class="search-header">
      <input type="text" class="search" placeholder="搜索栏">
      <button class="sxBtn">筛选</button>
    </div>
    <div>
    <ul>
      <li v-for="item in list" to="/info" :key='item.id' :class="item.listBg" @click="hreftwo" >
        <span class="title-img tabiao"></span>
        <span class="info">
          <span class="project-name">XXX项目</span>
          <span class="company">重庆中法供水有限公司悦来分公司</span>
        </span>
        <circle-progress
          ref="$circle"
          class="progress"
          :id="item.id"
          :isAnimation="true"
          :isRound="true"
          :width="width"
          :radius="3"
          :progress="item.progress"
          :barColor="item.barColor"
          :duration="1000"
          :delay="20"
          :timeFunction="item.timeFunction"
          :backgroundColor="item.backgroundColor"
        >
        </circle-progress>
        <span class="state">{{item.state}}</span>
      </li>
    </ul>
  </div>
  </div>
</template>
<script>
import CircleProgress from '@/components/circle-progress'
export default {
  name: 'mobile_index',
  components: {
    CircleProgress
  },
  data () {
    return {
      width: document.documentElement.clientWidth / 10 * 1.5,
      list: [
        {
          id: 1,
          progress: 25,
          barColor: '#26c666',
          backgroundColor: '#e7eaf0',
          timeFunction: 'cubic-bezier(0.99, 0.01, 0.22, 0.94)',
          state: '未开工',
          listBg: 'bg-green'
        },
        {
          id: 2,
          progress: 50,
          barColor: '#2e73ff',
          backgroundColor: '#e7eaf0',
          timeFunction: 'cubic-bezier(0.99, 0.01, 0.22, 0.94)',
          state: '建设中',
          listBg: 'bg-blue'
        },
        {
          id: 3,
          progress: 100,
          barColor: '#f78305',
          backgroundColor: '#FFE8CC',
          timeFunction: 'cubic-bezier(0.99, 0.01, 0.22, 0.94)',
          state: '已完成',
          listBg: 'bg-orange'
        }
      ]
    }
  },
  methods: {
    hreftwo () {
      this.$router.push({ path: '/info' })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .search-header{
    width: 100%;
    height: 0.75rem;
    margin-top:0.347rem;
    margin-bottom:0.347rem;
    .search {
      width: 7.2rem;
      height: 0.75rem;
      border-radius: 12px;
      outline: none;
      border: 0px solid #ccc;
      margin-left:  0.6rem ;
      margin-right: 0.6rem;
      float:left;
      background: #e7eaf0;
      text-align:center;
    }
    .sxBtn{
      margin: 0;
      padding: 0;
      border: 1px solid transparent;  //自定义边框
      outline: none;
      background:transparent ;
      float:left;
      color: #5f5f6b;
      font-size: 0.3rem;
      line-height: 0.75rem;;
    }
  }

  ul{
    list-style:none;
    margin: 0px;
    padding:0px;
    width: 100%;
    li{
      height: 2.5rem;
      width: 8.8rem;
      margin: 0.34rem 0.6rem;
      display:inline-block;
      position: relative;
    }
  }
  .bg-blue{
    background: url("../../assets/mobile/list-lg-blue.png") no-repeat  ;
    background-size:contain;
  }
  .bg-orange{
    background: url("../../assets/mobile/list-bg-orange.png") no-repeat  ;
    background-size:contain;
  }
  .bg-green{
    background: url("../../assets/mobile/list-bg-green.png") no-repeat  ;
    background-size:contain;
  }
  .title-img{
    position: absolute;
    width: 1.17rem;
    height: 1.17rem;
    top: 0.64rem;
    left: 0.4rem;
    background: url("../../assets/mobile/tadiao.png") no-repeat  ;
    background-size:contain;
  }
 .info{
   position: absolute;
   top: 0.75rem;
   left: 1.8rem;
   display: flex;
   flex-direction:column;
   text-align:left;
   .project-name{
     font-size: 0.37rem;
     color: #ffffff;
     font-family:'方正兰亭黑简体';
   }
   .company{
     font-size: 0.2rem;
     color: #e7eaf0;
     margin-top: 0.1rem;
     font-family:'苹方';
   }
 }
  .progress{
    position: absolute;
    top: 0.45rem;
    right: 0.7rem;
    height: 1.33rem;
    width: 1.33rem;
  }
  .state{
    position: absolute;
    font-size: 0.32rem;
    color: #97979f;
    font-family: "微软雅黑";
    top: 0.96rem;
    right: 0.8rem;
  }
</style>
